<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>spirit</title>
    

    <link rel="stylesheet" href="./assets/css/bootstrap.min.css"/>

    <!-- 引入动画库 -->
    <link rel="stylesheet" href="./assets/css/animate.min.css">

    <!-- 引入重置样式 -->
    <link rel="stylesheet/less" href="./assets/css/reset.less"/>

    <!-- 引入公共样式 -->
    <link rel="stylesheet/less" href="./assets/css/common.less">

    <!-- 引入首页样式 -->
    <link rel="stylesheet/less" href="./assets/css/index.less">
</head>
<body>
    <!-- 头部 -->
    <header id="header" class="header">
        <nav class="navbar navbar-inverse">
            <div class="container">
                <!-- 移动端切换导航 -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    </button>
                    <a href="#banner" class="navbar-brand logo wow rollIn" href="javascript:void(0)">Spirit8</a>
                </div>
          
                <!-- 导航列表元素 -->
                <div class="menu collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a id="text" href="#banner" class="wow fadeInDownBig" data-wow-delay="-150ms" href="javascript:void(0)"><span>HOME</span></a></li>
                        <li><a href="#about" class="wow fadeInDownBig" data-wow-delay="-120ms" href="javascript:void(0)"><span>About</span></a></li>
                        <li><a href="#team" class="wow fadeInDownBig" data-wow-delay="-90ms" href="javascript:void(0)"><span>SERVICES</span></a></li>
                        <li><a href="#teamsec"  class="wow fadeInDownBig" data-wow-delay="-60ms" href="javascript:void(0)"><span>portfolio</span></a></li>
                        <li><a href="#teamfour"  class="wow fadeInDownBig" data-wow-delay="-30ms" href="javascript:void(0)"><span>testimonials</span></a></li>
                        <li><a href="#teamsix"  class="wow fadeInDownBig" data-wow-delay="0ms" href="javascript:void(0)"><span>CONTACT</span></a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <!-- 页面一 -->
    <div id="banner" class="banner">

        <div id="background">
            <img src="./assets/images/02.jpg"> 
        </div>


        <div class="box">
            <div class="headling wow rotateInDownRight">wELCOME on <span>spirit8</span></div>
            <p class="detext wow bounceIn">We are a digital agency with <span>years of experience</span> and with <span>extraordinary people</span></p>
            <div class="btndown wow rubberBand" data-wow-delay="200ms">
                <a href="#footer" href="javascript:void(0)">↓</a>
            </div>
        </div>
    </div>

    <!-- 页面二 -->
    <div id="about" class="about">
        <div class="container">
            <div class="left col-lg-7 wow fadeInUp" data-wow-delay="100ms">
                <img src="./assets/images/mac.png"/>
            </div>
            <div class="right col-lg-5">
                <div class="info">
                    <span class="short wow fadeInUp" data-wow-delay="100ms">ABOUT US</span>
                    <div class="title wow fadeInUp" data-wow-delay="200ms">
                        <span>SOME</span>
                        Some words
                        <span>about us</span>
                    </div>
                </div>
                <p class="content wow fadeInUp" data-wow-delay="300ms">We love building and rebuilding brands through our  specific skills. Using colour, fonts, and illustration, we brand companies in a way they will never forget.</p>
                <ul class="newlist">
                    <li class="wow fadeInUp" data-wow-delay="400ms">
                        <span class="glyphicon glyphicon-record"></span>
                        <span>Mission -</span>
                        <span>We deliver uniqueness and quality</span>
                    </li>
                    <li class="wow fadeInUp" data-wow-delay="500ms">
                        <span class="glyphicon glyphicon-record"></span>
                        <span>Mission -</span>
                        <span>We deliver uniqueness and quality</span>
                    </li>
                    <li class="wow fadeInUp" data-wow-delay="600ms">
                        <span class="glyphicon glyphicon-record"></span>
                        <span>Mission -</span>
                        <span>We deliver uniqueness and quality</span>
                    </li>
                </ul>

                <div class="button wow fadeInUp" data-wow-delay="700ms">
                    <span class="icon">
                        <img src="./assets/images/btn-icon.png">
                    </span>
                    <a href="javascript:void(0)">Browse our work</a>
                </div>
            </div>

        </div>
    </div>

    <!-- 页面三 -->
    <div id="team" class="team">
        <div class="container">
            <div class="subject wow fadeInUp" data-wow-delay="100ms">Meet <span> our team</span></div>

            <input type="radio" name="listpic" id="pic" checked>
            <div class="list">
                <div class="item">
                    <div class="thumb wow fadeInUp" data-wow-delay="200ms">
                        <img src="./assets/images/01.jpg">
                    </div>
                    <div class="content">
                        <div class="texts wow fadeInUp" data-wow-delay="300ms">Jason Statham</div>
                        <div class="info wow fadeInUp" data-wow-delay="400ms">Knife designer</div>
                        <div class="desc wow fadeInUp" data-wow-delay="500ms">Do not seek to change what has come before. Seek to create that which has not.</div>
                    </div>
                </div>
                <div class="item">
                    <div class="thumb wow fadeInUp" data-wow-delay="200ms">
                        <img src="./assets/images/01.jpg">
                    </div>
                    <div class="content">
                        <div class="texts wow fadeInUp" data-wow-delay="300ms">Van Damme</div>
                        <div class="info wow fadeInUp" data-wow-delay="400ms">No English</div>
                        <div class="desc wow fadeInUp" data-wow-delay="500ms">Do not seek to change what has come before. Seek to create that which has not.</div>
                    </div>
                </div>
                <div class="item">
                    <div class="thumb wow fadeInUp" data-wow-delay="200ms">
                        <img src="./assets/images/01.jpg">
                    </div>
                    <div class="content">
                        <div class="texts wow fadeInUp" data-wow-delay="300ms">Jet Li</div>
                        <div class="info wow fadeInUp" data-wow-delay="400ms">I need more money</div>
                        <div class="desc wow fadeInUp" data-wow-delay="500ms">Do not seek to change what has come before. Seek to create that which has not.</div>
                    </div>
                </div>
                <div class="item">
                    <div class="thumb wow fadeInUp" data-wow-delay="200ms">
                        <img src="./assets/images/01.jpg">
                    </div>
                    <div class="content">
                        <div class="texts wow fadeInUp" data-wow-delay="300ms">Sylvester Stallone</div>
                        <div class="info wow fadeInUp" data-wow-delay="400ms">Cigar Lover</div>
                        <div class="desc wow fadeInUp" data-wow-delay="500ms">Do not seek to change what has come before. Seek to create that which has not.</div>
                    </div>
                </div>
            </div>

            <input type="radio" name="listpic" id="pic1">
            <div class="list">
                <div class="item">
                    <div class="thumb">
                        <img src="./assets/images/04.jpg">
                    </div>
                    <div class="content">
                        <div class="texts">Jason Statham</div>
                        <div class="info">Knife designer</div>
                        <div class="desc">Do not seek to change what has come before. Seek to create that which has not.</div>
                    </div>
                </div>
                <div class="item">
                    <div class="thumb">
                        <img src="./assets/images/04.jpg">
                    </div>
                    <div class="content">
                        <div class="texts">Van Damme</div>
                        <div class="info">No English</div>
                        <div class="desc">Do not seek to change what has come before. Seek to create that which has not.</div>
                    </div>
                </div>
                <div class="item">
                    <div class="thumb">
                        <img src="./assets/images/04.jpg">
                    </div>
                    <div class="content">
                        <div class="texts">Jet Li</div>
                        <div class="info">I need more money</div>
                        <div class="desc">Do not seek to change what has come before. Seek to create that which has not.</div>
                    </div>
                </div>
                <div class="item">
                    <div class="thumb">
                        <img src="./assets/images/04.jpg">
                    </div>
                    <div class="content">
                        <div class="texts">Sylvester Stallone</div>
                        <div class="info">Cigar Lover</div>
                        <div class="desc">Do not seek to change what has come before. Seek to create that which has not.</div>
                    </div>
                </div>
            </div>

            <input type="radio" name="listpic" id="pic2">
            <div class="list">
                <div class="item">
                    <div class="thumb">
                        <img src="./assets/images/03.jpg">
                    </div>
                    <div class="content">
                        <div class="texts">Jason Statham</div>
                        <div class="info">Knife designer</div>
                        <div class="desc">Do not seek to change what has come before. Seek to create that which has not.</div>
                    </div>
                </div>
                <div class="item">
                    <div class="thumb">
                        <img src="./assets/images/03.jpg">
                    </div>
                    <div class="content">
                        <div class="texts">Van Damme</div>
                        <div class="info">No English</div>
                        <div class="desc">Do not seek to change what has come before. Seek to create that which has not.</div>
                    </div>
                </div>
                <div class="item">
                    <div class="thumb">
                        <img src="./assets/images/03.jpg">
                    </div>
                    <div class="content">
                        <div class="texts">Jet Li</div>
                        <div class="info">I need more money</div>
                        <div class="desc">Do not seek to change what has come before. Seek to create that which has not.</div>
                    </div>
                </div>
                <div class="item">
                    <div class="thumb">
                        <img src="./assets/images/03.jpg">
                    </div>
                    <div class="content">
                        <div class="texts">Sylvester Stallone</div>
                        <div class="info">Cigar Lover</div>
                        <div class="desc">Do not seek to change what has come before. Seek to create that which has not.</div>
                    </div>
                </div>
            </div>



            <div class="more wow fadeInUp" data-wow-delay="600ms">
                <label for="pic"></label>
                <label for="pic1"></label>
                <label for="pic2"></label>
            </div>
        </div>
    </div>

    <!-- 页面四 -->
    <div id="teamsec" class="teamsec">
        <div class="container">
            <div class="subject2 wow fadeInUp" data-wow-delay="100ms">take a look at <span>our services</span></div>

            <div class="detext2 wow fadeInUp" data-wow-delay="200ms">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>

            <div class="list2">
                <div class="item2">
                    <div class="thumb2 wow fadeInUp" data-wow-delay="300ms"><img src="./assets/images/tb1.png"></div>
                    <div class="content">
                        <div class="texts2 wow fadeInUp" data-wow-delay="400ms">Web design</div>
                        <div class="info2 wow fadeInUp" data-wow-delay="500ms">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
                    </div>
                </div>
                <div class="item2">
                    <div class="thumb2 wow fadeInUp" data-wow-delay="300ms"><img src="./assets/images/tb2.png"></div>
                    <div class="content">
                        <div class="texts2 wow fadeInUp" data-wow-delay="400ms">Mobile apps</div>
                        <div class="info2 wow fadeInUp" data-wow-delay="500ms">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
                    </div>
                </div>
                <div class="item2">
                    <div class="thumb2 wow fadeInUp" data-wow-delay="300ms"><img src="./assets/images/tb3.png"></div>
                    <div class="content">
                        <div class="texts2 wow fadeInUp" data-wow-delay="400ms">PHOTOGRAPHY</div>
                        <div class="info2 wow fadeInUp" data-wow-delay="500ms">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
                    </div>
                </div>
                <div class="item2">
                    <div class="thumb2 wow fadeInUp" data-wow-delay="300ms"><img src="./assets/images/tb4.png"></div>
                    <div class="content">
                        <div class="texts2 wow fadeInUp" data-wow-delay="400ms">marketing</div>
                        <div class="info2 wow fadeInUp" data-wow-delay="500ms">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页面五 -->
    <div class="teamthi">
        <div class="container">
            <div class="subject3 wow fadeInUp" data-wow-delay="100ms">SOME OF <span>OUR CLIENTS</span></div>
            <div class="detext3 wow fadeInUp" data-wow-delay="200ms"><img src="./assets/images/text1.png"><img src="./assets/images/text2.png"><img src="./assets/images/text3.png"><img src="./assets/images/text4.png"><img src="./assets/images/text5.png"> </div>
            <div class="more2 wow fadeInUp" data-wow-delay="300ms">
                <label for=""></label>
                <label for=""></label>
                <label for=""></label>
            </div>
        </div>
    </div>

    <!-- 页面六 -->
    <div id="teamfour" class="teamfour">
        <div class="container">
            <div class="subject4 wow fadeInUp" data-wow-delay="100ms">
                take a look at <span>our work</span>
            </div>
            <div class="detext4 wow fadeInUp" data-wow-delay="200ms">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>

            <div class="box">
                <div class="top wow fadeInUp" data-wow-delay="300ms">
                    <div class="left">Filter by type</div>
                    <div class="right">
                        <a href="javascript:void(0)">All</a>
                        <a href="javascript:void(0)">Web design</a>
                        <a href="javascript:void(0)">Mobile design</a>
                        <a href="javascript:void(0)">Photograpy</a>
                    </div>

                </div>

                <div class="list">
                    <div class="lang wow fadeInUp" data-wow-delay="400ms">
                        <div class="item">
                            <div class="thumb">
                                <img src="./assets/images/work-img.png">
                            </div>
                        </div>
                        <div class="item">
                            <div class="thumb">
                                <img src="./assets/images/work-img.png">
                            </div>
                        </div>
                        <div class="item">
                            <div class="thumb">
                                <img src="./assets/images/work-img.png">
                            </div>
                        </div>
                        <div class="item">
                            <div class="thumb">
                                <img src="./assets/images/work-img.png">
                            </div>
                        </div>
                    </div>
                    <div class="lang wow fadeInUp" data-wow-delay="500ms">
                    <div class="item">
                        <div class="thumb">
                            <img src="./assets/images/work-img2.png">
                        </div>
                    </div>
                    <div class="item">
                        <div class="thumb">
                            <img src="./assets/images/work-img2.png">
                        </div>
                    </div>
                    <div class="item">
                        <div class="thumb">
                            <img src="./assets/images/work-img2.png">
                        </div>
                    </div>
                    <div class="item">
                        <div class="thumb">
                            <img src="./assets/images/work-img2.png">
                        </div>
                    </div>
                    </div>
                    <div class="lang wow fadeInUp" data-wow-delay="600ms">
                    <div class="item">
                        <div class="thumb">
                            <img src="./assets/images/work-img3.png">
                        </div>
                    </div>
                    <div class="item">
                        <div class="thumb">
                            <img src="./assets/images/work-img3.png">
                        </div>
                    </div>
                    <div class="item">
                        <div class="thumb">
                            <img src="./assets/images/work-img3.png">
                        </div>
                    </div>
                    <div class="item">
                        <div class="thumb">
                            <img src="./assets/images/work-img3.png">
                        </div>
                    </div>
                </div>
                </div>    
            </div> 
        </div>
    </div>

    <!-- 页面七 -->
    <div class="teamfif">
        <div class="container">
            <div class="subject wow fadeInUp" data-wow-delay="100ms">our clients’ <span>testimonials</span></div>

            <input type="radio" name="client" id="client1" checked />
            <div class="content">
                <p class="detext wow fadeInUp" data-wow-delay="200ms">This book is a treatise on the theory of ethics</p>
                <p class="text wow fadeInUp" data-wow-delay="300ms">Dean Martin</p>
            </div>

            <input type="radio" name="client" id="client2" checked />
            <div class="content">
                <p class="detext"> very popular during the Renaissance</p>
                <p class="text">CEO Acme Inc</p>
            </div>
            
            <input type="radio" name="client" id="client3" checked />
            <div class="content">
                <p class="detext"> The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
                <p class="text">Dean Martin, CEO Acme Inc.</p>
            </div>
            <div class="more wow fadeInUp" data-wow-delay="400ms">
                <label for="client1"></label>
                <label for="client2"></label>
                <label for="client3"></label>
            </div>
        </div>
    </div>

    <!-- 页面八 -->
    <div id="teamsix" class="teamsix">
        <div class="container">
            <div class="subject wow fadeInUp" data-wow-delay="100ms"> feel free to  <span>contact us</span></div>

            <p class="detext wow fadeInUp" data-wow-delay="200ms">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. </p>

            <div class="content">
                <div class="info wow fadeInUp" data-wow-delay="300ms">
                    <div class="left">
                        <div class="top">
                            <span>Name</span>
                            <sup>*</sup>
                        </div>
                        <div class="bottom">
                            <input type="text" name="username" required placeholder="请输入用户名">
                        </div>
                    </div>
                    <div class="right">
                        <div class="top">
                            <span>Email</span>
                            <sup>*</sup>
                        </div>
                        <div class="bottom">
                            <input type="email" name="email" required placeholder="请输入邮箱地址">
                        </div>
                    </div>
                </div>
                <div class="message wow fadeInUp" data-wow-delay="400ms">
                    <div class="top">
                        <span>Message</span>
                        <sup>*</sup>
                    </div>
                    <div class="bottom">
                        <textarea name="message" rows="8" placeholder="请输入留言内容" required></textarea>
                    </div>
                </div>
                <div class="send wow fadeInUp" data-wow-delay="500ms">
                    <button type="button">SEND</button>
                </div>
            </div>
        </div>
    </div>

    <!-- footer -->
    <footer id="footer" class="footer">
        <div class="container">
            <div class="box">
                <div class="copyright wow fadeInUp" data-wow-delay="100ms">ALL RIGHTS RESERVED. COPYRIGHT © 2014 SPIRIT8</div>
                <div class="links">
                    <a class="wow fadeInUp" data-wow-delay="100ms" href="javascript:void(0)">
                        <img src="./assets/images/footer1.png" alt="">
                    </a>
                    <a class="wow fadeInUp" data-wow-delay="200ms" href="javascript:void(0)">
                        <img src="./assets/images/footer2.png" alt="">
                    </a>
                    <a class="wow fadeInUp" data-wow-delay="300ms" href="javascript:void(0)">
                        <img src="./assets/images/footer3.png" alt="">
                    </a>
                    <a class="wow fadeInUp" data-wow-delay="400ms" href="javascript:void(0)">
                        <img src="./assets/images/footer4.png" alt="">
                    </a>
                    <a class="wow fadeInUp" data-wow-delay="500ms" href="javascript:void(0)">
                        <img src="./assets/images/footer5.png" alt="">
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <!-- 返回顶部 -->
    <div id="totop">
        <a class="glyphicon glyphicon-arrow-up" href="#banner" id="gotop"></a>
    </div>
</body>
</html>
<!-- 引入jquery -->
<script src="./assets/js/jquery.min.js"></script>

<!-- 引入bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- 引入解析less的插件 -->
<script src="./assets/js/less.min.js"></script>

<!-- 引入懒加载的插件 -->
<script src="./assets/js/wow.min.repeat.js"></script>

<script>

    // 懒加载初始化
    new WOW().init()

    // 给页面绑定一个监听滚动条变化的事件
    $(document).scroll(function(){
        // 获取到拉动一个距离
        var distance = $(this).scrollTop()

        // 当前滚动条的值大于50px，就给导航栏加背景颜色
        if(distance > 10){
            $("#header").css({"backgroundColor":"#111111",paddingBottom:0})

            $("#gotop").css({zIndex:1000,opacity:1})
        }else{
            $("#header").css({"backgroundColor":"transparent",paddingBottom:"1em"})

            $("#gotop").css({zIndex:-1000,opacity:0})
        }
    })

    //锚点的缓动效果 给特定链接元素 绑定点击事件
    $("#totop a,.menu a,#banner a,.logo").click(function(){


        //系统替换后的结果
        var LocationReplace = location.pathname.replace(/^\//, '')
        var CurrentReplace = this.pathname.replace(/^\//, '')

        //系统获取的域名部分
        var LocationHostname = location.hostname
        var CurrentHostname = this.hostname


        if(LocationReplace == CurrentReplace && LocationHostname == CurrentHostname)
        {
            //获取将要跳转的锚点位置
            var $target = $(this.hash)

            //一定要当他找到锚点元素的时候，才跳转锚点
            if($target.length > 0)
            {
                //获取目标元素的位置
                var pos = $target.offset().top

                //让页面的body和html 滚动到 pos这个位置
                $("html,body").animate({
                    //指的就是滚动条的距离
                    scrollTop:pos
                }, 1000)
            }

            //阻止刷新界面
            return false

        }



    })
</script>
